<template>

    <div v-show="['i', 'o'].includes(target.usage)" style="margin-top: 40px;">

        <Form :label-width="100" @submit.native.prevent>
            <FormItem v-show="target.usage=='i'" label="输入模式:">
                <span v-show="target.info.pull=='up'">
                    固定上拉 (常高)
                </span>
                <span v-show="target.info.pull=='down'">
                    固定下拉 (常低)
                </span>

                <i-switch v-show="!target.info.pull" size="large"
                            :value="target.gpio.mode=='input-pullup'"
                            @on-change="inputModeChanged">
                    <span slot="open">上拉</span>
                    <span slot="close">下拉</span>
                </i-switch>
            </FormItem>

            <FormItem label="当前输入:" v-show="target.usage=='i'">
                {{ target.gpio.value? '1 (高电平)': '0 (低电平)'}}
            </FormItem>
            
            <FormItem label="输出值:" v-show="target.usage=='o'">
                <i-switch size="large" :value="!!target.gpio.value" @on-change="target.gpio.value=!target.gpio.value">
                    <span slot="open">1 (高电平)</span>
                    <span slot="close">0 (低电平)</span>
                </i-switch>
            </FormItem>
        </Form>

    </div>
</template>

<script lang="ts">
// doc: https://github.com/kaorun343/vue-property-decorator
import { Component, Provide, Prop, Watch, Vue } from 'vue-property-decorator';
import { Stud, GPIOMode } from '../../../../store/Stud';
import { Usage } from '../../../../store/StudUsage';



@Component({components:{  }})
export default class GPIO extends Vue {
    
    @Prop(Stud) target: Stud

    inputModeChanged(value: boolean) {
        this.target.gpio.mode = value?
                        GPIOMode.input_pullup:
                        GPIOMode.input_pulldown
    }

    mounted () {

    }
}
</script>